<template>
    <div>
        <!-- 组件使用示例，必须放在el-form标签内 -->
        <el-form :inline="true" label-position="right" label-width="120px">
            <!-- 这是点击展开/折叠搜索条件的组件 -->
            <collapse-link/>
            <!-- 这是搜索条件插槽组件，把要展示的搜索条件放入该标签内即可 -->
            <collapse-item>
                <el-form-item label="注册地址：">
                    <el-input v-model="formInline.registeredAddress" placeholder="请输入" clearable>
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                </el-form-item>
                <el-form-item label="登记注册类型：">
                    <el-select v-model="formInline.registeredType" placeholder="请选择" clearable>
                        <el-option
                            v-for="item in registeredTypeOptions"
                            :key="item.label"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="牌照办理进度：">
                    <el-select v-model="formInline.progress" placeholder="请选择" clearable>
                        <el-option
                            v-for="item in progressOptions"
                            :key="item.label"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </collapse-item>
        </el-form>
    </div>
</template>

<script>
    // 引入折叠搜索条件组件
    import collapseLink from "../../components/searchCollapse/collapseLink";
    import collapseItem from "../../components/searchCollapse/collapseItem";

    export default {
        name: "demo.vue",
        data() {
            return {
                collapseStatus: false,          // 是否展开高级搜索
                formInline: {
                    registeredAddress: '',      // 注册地址
                    registeredType: '',         // 登记注册类型
                    progress: ''                // 牌照办理进度
                },
                registeredTypeOptions: [{
                    value: '有限责任公司',
                    label: '有限责任公司'
                }, {
                    value: '股份有限公司',
                    label: '股份有限公司'
                }, {
                    value: '私营企业',
                    label: '私营企业'
                }, {
                    value: '国有企业',
                    label: '国有企业'
                }],
                progressOptions: [{
                    value: '未办理',
                    label: '未办理'
                }, {
                    value: '办理中',
                    label: '办理中'
                }, {
                    value: '已办理',
                    label: '已办理'
                }]
            }
        },
        components: {collapseLink, collapseItem}
    }
</script>

<style scoped>

</style>
